import React, { memo } from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import { HotPlaylistWrapper, ContentWrapper } from './style'
import { formatImg } from '@/utils/format'
import useShowPlaylistDetail from '@/hooks/useShowPlaylistDetail'
export default memo(function HotPlaylist() {
  const { playlist } = useSelector(state => ({
    playlist: state.getIn(['playlist','playlist'])
  }), shallowEqual)
  const goToPlaylistDetail = useShowPlaylistDetail()
  return (
    <HotPlaylistWrapper>
      <h3 className="title">热门歌单</h3>
      <ContentWrapper>
        {
          playlist.slice(0, 5).map(item => {
            return (
              <div className="item" key={item.id}>
                <div className="left" onClick={e => goToPlaylistDetail(item.id)}>
                  <img src={formatImg(item.coverImgUrl,50)} alt="" />
                </div>
                <div className="right">
                  <div className="name text-nowrap" onClick={e => goToPlaylistDetail(item.id)}>{item.name}</div>
                  <div className="creator">
                    <span>by {item.creator.nickname}</span>
                    {item.creator.avatarDetail? <img src={item.creator.avatarDetail.identityIconUrl} alt="" className='icon' /> : null}
                  </div>
                </div>
              </div>
            )
          })
        }
      </ContentWrapper>
    </HotPlaylistWrapper>
  )
})
